<template>
<!-- 运行信息 -->
  <div class="run-info">
    <div class="info-box">
      <div class="info">
        <span class="key">制品名:</span>
        <span class="value">{{ module.name }}</span>
      </div>
      <div class="info">
        <span class="key">类型:</span>
        <span class="value">{{ module.type }}</span>
      </div>
      <div class="info" v-if="moduleRun">
        <span class="key">状态:</span>
        <span class="status-running" v-if="'stop'!=moduleRun.operation"> Running </span>
        <span class="pod-info" @click="showPod" v-if="'stop'!=moduleRun.operation">详情</span>
        <span class="status-stop" v-if="'stop'===moduleRun.operation"> Stop </span>
      </div>

      <div class="info" v-if="moduleRun">
        <span class="key">版本:</span>
        <span class="value" v-text="moduleRun.imageName"></span>
      </div>
      <div class="info" v-if="moduleRun">
        <span class="key">时间:</span>
        <span class="value" v-text="moduleRun.createTime"></span>
      </div>

      <div class="info" v-if="moduleRun">
        <span class="key">操作:</span>
        <a-button
          type="primary"
          size="small"
          style="margin: 2px; font-size: 14px"
          v-if="
            'start' === moduleRun.operation || 'restart' === moduleRun.operation
          "
          @click="restart(module.id)"
        >
          重启</a-button
        >
        <a-button
          type="primary"
          size="small"
          style="margin: 2px; font-size: 14px"
          v-if="'stop' === moduleRun.operation"
          @click="start(module.id, moduleRun.moduleBuildId)"
        >
          运行</a-button
        >
        <a-button
          type="primary"
          size="small"
          style="margin: 2px"
          @click="stop(module.id)"
          :disabled="'stop' === moduleRun.operation"
          >停止</a-button
        >
        <a-button type="primary" size="small" style="font-weight: 400" @click="openLog" v-if="module.type === 'exec_jar'">
          日志
        </a-button>
      </div>
      <a-divider />
      <ModuleRunning ref="moduleRunningRef"  :moduleId="module.id" />
    </div>
  </div>
  <a-drawer
    title="Pod 详 情"
    placement="right"
    :closable="true"
    @close="cannelPod"
    :visible="state.podVisible"
    width="80%"
    destroyOnClose
  >
    <a-table
      bordered
      :dataSource="state.podList"
      :columns="state.podColumn"
      :pagination="false"
      :locale="{ emptyText: '暂无数据' }"
    >
      <template #bodyCell="{ column, record}">
        <template v-if="column.dataIndex === 'logCommand'">
          <a @click="copy(record.logCommand)">复制</a>
        </template>
        <template v-if="column.dataIndex === 'consoleCommand'">
          <a @click="copy(record.consoleCommand)">复制</a>
        </template>
        <template v-if="column.dataIndex === 'getLog'">
          <a @click="showLog(record.name)">刷新</a>
        </template>
      </template>
    </a-table>
    
    <pre v-html="state.logs" class="pod-log"></pre>
  </a-drawer>
</template>



<script lang="ts" scoped>
import { defineComponent, reactive, ref, toRefs } from "vue";
import { moduleRunApi } from "@/api/devcloudApi";
import { message } from "ant-design-vue";
import ModuleRunning from "./runInfo/ModuleRunning.vue";

export default defineComponent({
  name: "running",
  components: {
    ModuleRunning
  },
  props: {
    logUrl: {
      type: String,
      required: false
    },
    module: {
      type: Object,
      required: false,
    },
    moduleBuild: {
      type: Object,
      required: false,
    },
    moduleRun: {
      type: Object,
      required: false,
    },
  },
  emits: ["reloadModuleBuildRun"],
  setup(props, ctx) {
    const { module, moduleRun } = toRefs(props);
    const moduleRunningRef = ref()
    const state:any = reactive({
      podVisible: false,
      podList: [],
      podColumn: [
        {
          title: "deploy名称",
          dataIndex: "deploymentName",
          key: "deploymentName",
          width: 150,
          customCell: (item: any) => {
            return { rowSpan: item.rowSpan };
          }
        },
        {
          title: "Pod名称",
          dataIndex: "name",
          key: "name",
          width: 200,
        },
        {
          title: "容器状态",
          dataIndex: "status",
          key: "status",
          width: 10,
          align: "center"
        },
        {
          title: "Host Ip",
          dataIndex: "hostIp",
          key: "hostIp",
          width: 20,
          align: "center"
        },
        {
          title: "Pod Ip",
          dataIndex: "podIp",
          key: "podIp",
          width: 20,
          align: "center"
        },
        {
          title: "创建时间",
          dataIndex: "startTime",
          key: "startTime",
          width: 120

        },
        {
          title: "日志命令",
          dataIndex: "logCommand",
          key: "logCommand",
          width: 50,
          align: "center"
        },
        {
          title: "终端命令",
          dataIndex: "consoleCommand",
          key: "consoleCommand",
          width: 50,
          align: "center"
        },
        {
          title: "获取日志",
          dataIndex: "getLog",
          key: "getLog",
          width: 50,
          align: "center"
        },
      ],
      scalePod: null,
      scale: 0,
      scaleVisible: false
    });

    const start = async (moduleId: number, buidId: number) => {
      const res = await moduleRunApi.start(buidId);
      if (res.success) {
        ctx.emit("reloadModuleBuildRun", moduleId);
        message.info("启动成功");
      }
    }

    const restart = async (moduleId: number) => {
      const res = await moduleRunApi.restart(moduleId);
      if (res.success) {
        ctx.emit("reloadModuleBuildRun", moduleId);
        message.info("重启成功");
      }
    }

    const stop = async (moduleId: number) => {
      const res = await moduleRunApi.stop(moduleId);
      if (res.success) {
        ctx.emit("reloadModuleBuildRun", moduleId);
        message.info("停止成功");
      }
    }

    const listPod = async () => {
      if (module.value) {
        const res = await moduleRunApi.listPod(module.value.id);
        if (res.success) {
          var row: { deploymentName: any; rowSpan: any; }|null;
          var count: number;
          res.result.forEach((item: { deploymentName: any; rowSpan: number; })=>{
            if(null == row || row.deploymentName !== item.deploymentName){
              row = item;
              count = 1;
              item.rowSpan=1
              return
            }
            count ++;
            row.rowSpan=count;
            item.rowSpan=0
            
          })
          state.podList = res.result;
        }
      }
    }

    const cannelPod = () => {
      state.logs = ''
      state.podVisible = false;
    }

    const showPod = () => {
      state.podVisible = true;
      listPod();
    }

    const openLog = () => {
      window.open(props.logUrl, "_blank");
    }

    const copy = async (str:string) => {
      if(navigator.clipboard && window.isSecureContext){
        navigator.clipboard.writeText(str).then(
          ()=>{
            message.success("复制成功: " + str)
          },
          ()=>{
            message.warn("复制失败")
          }
        )
      }else {
        const textArea = document.createElement('textarea')
        textArea.style.position = 'fixed'
        textArea.style.top = textArea.style.left = '-100vh'
        textArea.style.opacity = '0'
        textArea.value = str
        document.body.appendChild(textArea)
        textArea.focus()
        textArea.select()
        if(document.execCommand('copy')){
          message.success("复制成功: " + str)
        }else{
          message.warn("复制失败")
        }
      }
    }

    const showLog = async (podName:string) => {
      if (module.value) {
        const res = await moduleRunApi.getLogs(module.value.id, podName, 100);
        if (res.success) {
          state.logs = podName + ':\n' +res.result
        }
      }
    }

    const reflushMouduleRunning = () => {
      moduleRunningRef.value.reflush()
    }
    
    return {
      state,
      start,
      stop,
      restart,
      showPod,
      cannelPod,
      listPod,
      openLog,
      copy,
      showLog,
      moduleRunningRef,
      reflushMouduleRunning,
    }
  },
});
</script>

<style lang="less">
.ant-table-wrapper{
  padding: 20px;
}
.run-info {
  padding: 20px 40px;
  width: 100%;
  box-shadow: rgba(0, 0, 0, 0.09) 1px 3px 8px;
  color: #404040;
  cursor: default;

  .info-box {
    padding: 40px 0;
    border:1px solid #ddd;
    // box-shadow: 0 1px 2px -2px rgb(0 0 0 / 16%), 0 3px 6px 0 rgb(0 0 0 / 12%), 0 5px 12px 4px rgb(0 0 0 / 9%);
    box-shadow: rgba(0, 0, 0, 0.2) 1px 3px 8px;
  }

  .info {
    line-height: 35px;
    .key {
      display: inline-block;
      width: 50px;
    }
    .status-running {
      color: #fff;
      background: #70bf47;
      border: 1px solid transparent;
      padding: 5px 10px;
      margin-right: 10px;
      font-weight: 550;
    }
    
    .status-stop {
      color: #fff;
      background: #eb5468;
      border: 1px solid transparent;
      padding: 5px 10px;
      margin-right: 10px;
      font-weight: 550;
    }

    .pod-info {
      text-decoration: underline;
      color: #1890ffcc;
      cursor: pointer;
      margin: 4px;
    }
  }
}

.pod-log{
    background: rgba(0, 0, 0, .8);
    color: #fff;
    padding: 15px 10px;
    font-size: 12px;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    *white-space: normal !important;
    height: 78vh !important;
    overflow: hidden;
    overflow-y: scroll;
    margin-top: 20px;

}

// pre {
//     background: rgba(0, 0, 0, .8);
//     color: #fff;
//     padding: 15px 10px;
//     font-size: 12px;
//     white-space: pre-wrap !important;
//     word-wrap: break-word !important;
//     *white-space: normal !important;
//     height: 80vh !important;
//     overflow: hidden;
//     overflow-y: scroll;
//     margin-top: 20px;
// }

</style>